<template>
	<a-drawer
		title="查看证书"
		:width="800"
		:visible="visible"
		:destroy-on-close="true"
		:footer-style="{ textAlign: 'right' }"
		@close="onClose"
	>
		<a-table :columns="columns" :data-source="dataList" :pagination="false" bordered>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'valid'">
					<a-tag v-if="record.valid" color="green">有效</a-tag>
					<a-tag color="red" v-else>无效</a-tag>
				</template>
			</template>
		</a-table>
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
		</template>
	</a-drawer>
</template>

<script setup name="bizCabinetPermissionCertification">
	import bizCabinetPermissionReagentApi from '@/api/biz/bizCabinetPermissionReagentApi'

	const table = ref()
	const dataList = ref([])
	const visible = ref(false)
	const columns = [
		{
			title: '证书名称',
			dataIndex: 'certName'
		},
		{
			title: '有效期开始',
			dataIndex: 'beginTime'
		},
		{
			title: '有效期结束',
			dataIndex: 'endTime'
		},
		{
			title: '状态',
			dataIndex: 'valid'
		}
	]

	// 打开抽屉
	const onOpen = (record) => {
		visible.value = true
		bizCabinetPermissionReagentApi.bizCabinetPermissionListCertification({ userId: record.userId }).then((data) => {
			dataList.value = data
		})
	}
	// 关闭抽屉
	const onClose = () => {
		visible.value = false
	}
	// 抛出函数
	defineExpose({
		onOpen
	})
</script>
